<template>
  <div class="cmp-student-list">
    <a-drawer
      title="学员列表"
      placement="right"
      width="500"
      :closable="true"
      :visible="visible"
      @close="onCloseStudentList"
    >
      <a-list item-layout="horizontal" :data-source="students">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-list-item-meta :description="getDesc(item)">
            <div slot="title">{{ item.nick_name }}</div>
            <a-avatar slot="avatar" :src="item.avatar_url" />
          </a-list-item-meta>
          <a slot="actions" @click="showClockInList(index)">签到记录</a>
        </a-list-item>
      </a-list>
      <a-drawer
        :title="selectStudent"
        width="320"
        :closable="true"
        :visible="clockInListVisible"
        @close="onClockInListVisibleClose"
      >
        <a-timeline>
          <a-timeline-item :color="itemColor(lesson.lesson_id)" v-for="lesson in lessonList" :key="lesson.lesson_id">
            <p class="lesson-name">{{lesson.name}}</p>
            <p class="lesson-clock-in">{{hasClockIn(lesson.lesson_id)}}</p>
          </a-timeline-item>
        </a-timeline>
      </a-drawer>
    </a-drawer>
  </div>
</template>

<script>
import * as Api from '@/api/course/index'
export default {
  props: {
    visible: {
      type: Boolean,
    },

    students: {
      type: Array
    }
  },
  data() {
    return {
      clockInListVisible: false,
      clockInList: [],
      selectStudent: ''
    }
  },
  computed: {
    getDesc() {
      return item => {
        const len = item.userClockInRecords.length
        return `签到次数：${len} 次`
      }
    },

    lessonList() {
      return this.students?.[0]?.allLessons
    },

    hasClockIn() {
      return lessonId => {
        const record = this.clockInList.find(record => record.lesson_id == lessonId)
        return record ? `签到时间：${record.create_time}`: '未签到'
      }
    },

    itemColor() {
      return lessonId => this.hasClockIn(lessonId) == '未签到' ? 'gray': 'blue'
    }
  },
  methods: {
    onCloseStudentList() {
      this.$emit('close')
    },

    showClockInList(index) {
      this.clockInList = this.students[index].userClockInRecords
      this.selectStudent = this.students[index].nick_name
      this.clockInListVisible = true
    },

    onClockInListVisibleClose() {
      this.clockInListVisible = false
    },
  },
}
</script>

<style lang="less" scoped>
.lesson-name{
  font-weight: 600;
}

.lesson-clock-in{
  color: #666;
}
</style>